<!DOCTYPE html>
<html lang="en">
<head>
<title>gaps</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link type="text/css" href="/css/gap.css" rel="stylesheet" />
<link type="text/css" href="/css/jquery.dataTables.css" rel="stylesheet" />
<link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css"
   rel="stylesheet" />
</head>
<body>
   <div class="width9 center ui-widget">

      <!-- toolbar -->
      <div class="ui-widget">
         <button id="reset-button" class="ui-button">Reset</button>
         <button id="reload-button" class="ui-button">Reload</button>
         <button id="create-gap-button" class="ui-button">Create new Gap</button>
      </div>
      <br />
      
      <!-- gaps table -->
      <table id="gaps-table" class="ui-widget-content">
         <thead>
            <th width="2%"></th>
            <th width="15%">id</th>
            <th width="12%">version</th>
            <th width="71%">description</th>
         </thead>
         <tbody>
         </tbody>
         <tfoot class="ui-widget">
            <th>
               <input type="hidden" />
            </th>
            <th>
               <input type="text" placeholder="Search id" class="search_init ui-widget" />
            </th>
            <th>
               <select id="versions_select" class="search_init ui-widget">
               </select>
            </th>
            <th>
               <input type="text" placeholder="Search description" class="search_init ui-widget" />
            </th>
         </tfoot>
      </table>
   </div>

    <!-- gap form dialog -->
   <div id="gap-dialog" title="Edit Gap" class="ui-widget ui-state-focus">
      <div class="ui-widget">
         <form id="gap-form">
            <label for="gapid">id</label>
            <input type="text" id="gapid" class="form center ui-state-disabled" required="required" disabled="disabled" />

            <label for="version">version</label>
            <input type="text" id="version" name="version" class="form center" pattern="\d\.\d\.\d" required="required" />

            <label for="description">description</label>
            <input type="text" id="description" name="description" class="form center" />
         </form>
      </div>
   </div>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

   <script src="/js/lib/jquery.h5validate.js"></script>
   <script src="/js/lib/jquery.dataTables-1.9.0.js"></script>
   <script src="/js/lib/jquery.jeditable.js"></script>
   <script src="/js/gaps.js"></script>

</body>
</html>
